<template>
	<view class="comment_box">
		<!-- 评论头部 -->
		<Commentator :user-info="commentData.poster"></Commentator>
	
	
		<view class="comment_content">
			<!-- 回复内容 -->
			<text-overflow class="comment_text" expandText="....   [点击展开]" buttonColor="#a0a0a0" :onlyOpen="true">
				{{commentData.content}}
			</text-overflow>
	
			<!-- 回复图片 -->
			<file-list :data-list="commentData.fileList" @video_play="videoPlayBack"></file-list>
			
			<!-- 评论点赞数量等 -->
			<comment-footer :data-obj="commentData" @replyBack="replyBtnClick"></comment-footer>
	
			<!-- 回复的回复 -->
			<more-comment :data-object="commentData"  @moreCpnClick="moreCommentClick"></more-comment>
	
			
		</view>
	
	</view>
</template>

<script>
	import Commentator from "@/components/comment/commentator.vue";
	import textOverflow from "@/components/textOverflow.vue";
	import FileList from "@/components/file/fileList.vue";
	import CommentFooter from "@/components/comment/commentFooter.vue";
	import MoreComment from "@/components/comment/moreComment.vue";
	
	export default {
		name: "commentItem",
		props: {
			commentData: {
				type: Object,
				default () {
					return {
						id: "",
						content: "",
						rootId: "",
						parentId: "",
						likeCount: 0,
						replyCount: 0,
						likeOrDis: null,
						createdDate: "",
						poster: {},
						repostedUser: null,
						sonList: null,
						fileList: null
					}
				}
			},
		},
		components: {
			Commentator,
			textOverflow,
			FileList,
			CommentFooter,
			MoreComment
		},
		data() {
			return {
			}
		},
		methods: {
			// 回复按钮点击
			replyBtnClick(){
				this.$emit('replyClick',this.commentData)
			},
			// 点击显示更多
			moreCommentClick(){
				this.$emit('moreClick',this.commentData)
			},
			// 视频播放
			videoPlayBack(url){
				this.$emit('video_play',url)
			}
		}
	}
</script>

<style scoped lang="scss">
// 评论最顶级父类
	.comment_box {
		padding: 10px 12px;
		background-color: #FFFFFF;
		margin-bottom: 1px;
	}
	// 评论主体
	.comment_content {
		padding-left: 80upx;
		margin-top: -20upx;
	}
	/* 评论文字 */
	.comment_text {
		text-align: left;
		font-size: 15px;
		line-height: 20px;
		word-break: break-all;
		word-wrap: break-word;
		white-space: pre-wrap;
	}

	/* 评论图片父类 */
	.comment_imgs {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	/* 评论图片 */
	.comment_img {
		border-radius: 4px;
		margin: 3upx 3upx -2px 3upx;
		width: 208upx;
		height: 208upx;
	}

	

	
</style>
